<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 - canvas测试</title>
</head>
<body>
	<!-- 
		教程详见
		http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
	 -->
	<canvas id="myCanvas" width="800" height="600"></canvas>
	
	<script>
	//矩形
	function drawRect(id) {
        var canvas = document.getElementById(id)
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        //实践表明在不设施fillStyle下的默认fillStyle=black
	    context.fillRect(0, 0, 100, 100);//填充矩形（相对canvas左上角x轴，相对canvas左上角y轴，长，高）
	    //实践表明在不设施strokeStyle下的默认strokeStyle=black
	    context.strokeRect(120, 0, 100, 100);//边框矩形（相对canvas左上角x轴，相对canvas左上角y轴，长，高）
	
	    //设置纯色
	    context.fillStyle = "red";//填充样式
	    context.strokeStyle = "blue";//边框样式
        context.fillRect(0, 120, 100, 100);
        context.strokeRect(120, 120, 100, 100);

        //设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
        context.fillStyle = "rgba(255,0,0,0.2)";
        context.strokeStyle = "rgba(255,0,0,0.2)";
        context.fillRect(240, 0, 100, 100);
        context.strokeRect(240, 120, 100, 100);
        context.clearRect(50, 50, 240, 120);//擦除矩形
    }
	//圆
	function drawArc(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext('2d');
        context.beginPath();//开启路径
        context.arc(200, 150, 100, 0, Math.PI * 2, true);//画圆（圆心x，圆心y，半径，开始角度，结束角度，是否顺时针）
        //不关闭路径路径会一直保留下去，当然也可以利用这个特点做出意想不到的效果
        context.fillStyle = 'rgba(255,0,0,0.5)';//填充样式
        context.fill();//填充
        context.strokeStyle = 'rgba(255,0,0,1)';
        context.closePath();
        context.stroke();
    }
	//线lineTo(x, y)
	function drawLine(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        //context.beginPath();
        context.strokeStyle = "rgb(250,0,0)";
        context.fillStyle = "rgb(250,0,0)"
        context.lineTo(100, 100);//笔尖从100,100开始画直线
        context.lineTo(200, 200);//画出直线到200,200
        context.lineTo(200, 100);//再画出直线到200,100
        context.moveTo(200, 50);//移动笔尖到200,50
        context.lineTo(100,50);//再画出直线到100,50
        context.stroke();//只画边框
    }
	//几何图形实例（数学问题待研究）
	function drawFlower(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        //context.fillStyle = "#EEEEFF";
        //context.fillRect(0, 0, 400, 300);
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.fillStyle = 'rgba(255,0,0,0.25)';
        context.strokeStyle = 'rgb(0,0,0)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();

    }
	//曲线
	/*
	绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  
	cp1x:第一个控制点x坐标
    cp1y:第一个控制点y坐标
    cp2x:第二个控制点x坐标
    cp2y:第二个控制点y坐标
    x:终点x坐标
    y:终点y坐标
    -----------------------------------------------------
        绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
    qcpx:二次样条曲线控制点x坐标
    qcpy:二次样条曲线控制点y坐标
    qx:二次样条曲线终点x坐标
    qy:二次样条曲线终点y坐标
    */
	function drawCurve(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext("2d");

        context.moveTo(50, 50);//笔尖到50,50
        context.bezierCurveTo(50, 50,150, 50, 150, 150);
        context.stroke();
        context.quadraticCurveTo(150, 250, 250, 250);
        context.stroke();
    }
	//线性渐变
	/* 
	var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
	xstart:渐变开始点x坐标
    ystart:渐变开始点y坐标
    xEnd:渐变结束点x坐标
    yEnd:渐变结束点y坐标

	*/
	function drawLinearGradient(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext('2d');
        var g1 = context.createLinearGradient(0, 0, 0, 300);//创建线性渐变

        //g1.addColorStop(0, 'rgb(255,0,0)'); //红  
        //g1.addColorStop(0.2, 'rgb(0,255,0)');//绿
        //g1.addColorStop(1, 'rgb(0,0,255)'); //蓝
        g1.addColorStop(0, 'rgb(0,0,0)');//黑色
        g1.addColorStop(0.2, 'rgba(255,255,255,0)');//白色透明

        context.fillStyle = g1;//填充样式为线性渐变
        context.fillRect(0, 0, 400, 300);//填充矩形
    }
	//径向渐变
	/*
	var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
	xStart:发散开始圆心x坐标
    yStart:发散开始圆心y坐标
    radiusStart:发散开始圆的半径
    xEnd:发散结束圆心的x坐标
    yEnd:发散结束圆心的y坐标
    radiusEnd:发散结束圆的半径
	*/
	
	function drawRadialGradient(id) {
        //同一个圆心画球型
        /* var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext('2d');
        var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
        g1.addColorStop(0.1, 'rgb(255,0,0)');  
        g1.addColorStop(1, 'rgb(50,0,0)');
        context.fillStyle = g1;
        context.beginPath();
        context.arc(200, 150, 100, 0, Math.PI * 2, true);
        context.closePath();
        context.fill(); */
      
        //不同圆心看径向渐变模型
        var canvas = document.getElementById(id);
        if (canvas == null)
        return false;
        var context = canvas.getContext('2d');
        var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
        g1.addColorStop(0.1, 'rgb(255,0,0)');
        g1.addColorStop(0.5, 'rgb(0,255,0)');
        g1.addColorStop(1, 'rgb(0,0,255)');
        context.fillStyle = g1;
        context.fillRect(0, 0, 400, 300);

    }
	/* 
	图形变形
	1、平移context.translate(x,y)
    	x:坐标原点向x轴方向平移x
    	y:坐标原点向y轴方向平移y

	2、缩放context.scale(x,y)
	    x:x坐标轴按x比例缩放
	    y:y坐标轴按y比例缩放
	
	3、旋转context.rotate(angle)
	    angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）

	*/
	function draw5(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;


        var context = canvas.getContext("2d");
        context.save(); //保存了当前context的状态
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);

        context.fillStyle = "rgba(255,0,0,0.1)";
        //平移 缩放 旋转  1 2 3        
        context.translate(100, 100);//平移
        context.scale(0.5, 0.5);//缩放
        context.rotate(Math.PI / 4);//旋转
        context.fillRect(0, 0, 100, 100);


        context.restore(); //恢复到刚刚保存的状态,保存恢复只能使用一次
        context.save(); //保存了当前context的状态
        context.fillStyle = "rgba(255,0,0,0.2)";
        //平移 旋转 缩放 1 3 2
        context.translate(100, 100);
        context.rotate(Math.PI / 4);
        context.scale(0.5, 0.5);
        context.fillRect(0, 0, 100, 100);

        context.restore(); //恢复到刚刚保存的状态
        context.save(); //保存了当前context的状态
        context.fillStyle = "rgba(255,0,0,0.3)";
        //缩放 平移 旋转 2 1 3 
        context.scale(0.5, 0.5);
        context.translate(100, 100);
        context.rotate(Math.PI / 4);
        context.fillRect(0, 0, 100, 100);

        context.restore(); //恢复到刚刚保存的状态
        context.save(); //保存了当前context的状态
        context.fillStyle = "rgba(255,0,0,0.4)";
        //缩放 旋转 平移  2 3  1 
        context.scale(0.5, 0.5);
        context.rotate(Math.PI / 4);
        context.translate(100, 100);
        context.fillRect(0, 0, 100, 100);

        context.restore(); //恢复到刚刚保存的状态
        context.save(); //保存了当前context的状态
        context.fillStyle = "rgba(255,0,0,0.5)";
        //旋转 平移 缩放  3 1 2 
        context.rotate(Math.PI / 4);
        context.translate(100, 100);
        context.scale(0.5, 0.5);
        context.fillRect(0, 0, 100, 100);

        context.restore(); //恢复到刚刚保存的状态
        context.save(); //保存了当前context的状态
        context.fillStyle = "rgba(255,0,0,1)";
        //旋转 缩放 平移   3 2 1 
        context.rotate(Math.PI / 4);
        context.scale(0.5, 0.5);
        context.translate(100, 100);
        context.fillRect(0, 0, 100, 100);

        //实验表明应该移动的是坐标轴
        //实验表明缩放的是坐标轴比例
        //实验表明旋转的是坐标轴
        //综合上述，因此平移 缩放 旋转 三者的顺序不同都将画出不同的结果
    }
	/* 
	图形组合
	context.globalCompositeOperation=type
	type：
    source-over（默认值）:在原有图形上绘制新图形
    destination-over:在原有图形下绘制新图形
    source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
    destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
    source-out:只显示新图形非交集部分
    destination-out:只显示原有图形非交集部分
    source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
    destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
    lighter:原有图形和新图形都显示，交集部分做颜色叠加
    xor:重叠飞部分不现实
    copy:只显示新图形
	*/
	function drawGlobalCompositeOperation(id) {
        var canvas = document.getElementById(id);
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext("2d");
        var oprtns = new Array(
        "source-over",
        "destination-over",
        "source-in",
        "destination-in",
        "source-out",
        "destination-out",
        "source-atop",
        "destination-atop",
        "lighter",
        "xor",         
        "copy"
        );
       var i = 0;//组合效果编号
  
       //结合setinterval动态显示组合
       var interal = setInterval(function () {
    	   console.log(oprtns[i]);
           if (i == 10) {
               i=0;
           }
           else {
               i++;
           }
           //蓝色矩形
           context.fillStyle = "blue";
           context.fillRect(10, 10, 60, 60);
           //设置组合方式 
           context.globalCompositeOperation = oprtns[i];
           //设置新图形（红色圆形）
           context.beginPath();
           context.fillStyle = "red";
           context.arc(60, 60, 30, 0, Math.PI * 2, false);
           context.fill();
      }, 1000);
       
    }
	/* 绘制阴影 */
	function drawShadow(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext('2d');
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowColor = 'rgba(100,100,100,0.5)';
        context.shadowBlur = 1.5;
        context.fillStyle = 'rgba(255,0,0,0.5)';
        context.fillRect(100, 100, 200, 100);
    }
	/* 绘制复杂图形的阴影 
		原理：在每绘制一个图形就加上该图形的阴影
	*/
	function create5Star(context) {
        var n = 0;
        var dx = 100;
        var dy = 0;

        var s = 50;
        //创建路径
        context.beginPath();
        context.fillStyle = 'rgba(255,0,0,0.5)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);

        }
        context.closePath();

    }
    function drawShadow2(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext("2d");
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 400, 300);
     
        context.shadowOffsetX = 10;
        context.shadowOffsetY = 10;
        context.shadowColor = 'rgba(100,100,100,0.5)';
        context.shadowBlur =5;
        //图形绘制
        context.translate(0, 50);
        for (var i = 0; i < 3; i++) {
            context.translate(50, 50);
            create5Star(context);
            context.fill();
        }
    }
    
    /* 绘制图像  */
    //drawImage(image,x,y)
     function draw28(id) {

         var image = new Image();

         image.src = "http://imgculture.gmw.cn/attachement/jpg/site2/20160204/f04da226e54a181cf70901.jpg";
         var canvas = document.getElementById(id);

         if (canvas == null)
             return false;
         var context = canvas.getContext("2d");
         context.fillStyle = "#EEEEFF";

         context.fillRect(0, 0, 400, 300);
         image.onload = function () {
             context.drawImage(image,0,0);
         }
     }

     //drawImage(image,x,y,w,h)
     function draw12(id) {
       
         var image = new Image();

         image.src = "http://imgculture.gmw.cn/attachement/jpg/site2/20160204/f04da226e54a181cf70901.jpg";
         var canvas = document.getElementById(id);

         if (canvas == null)
             return false;
         var context = canvas.getContext("2d");
         context.fillStyle = "#EEEEFF";
        
         context.fillRect(0, 0, 400, 300);
         image.onload = function () {
             context.drawImage(image, 50, 50, 300, 200);
         }
     }

     //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
     function draw13(id){
         var image = new Image();
         image.src = "http://imgculture.gmw.cn/attachement/jpg/site2/20160204/f04da226e54a181cf70901.jpg";
         var canvas = document.getElementById(id);
        
         if (canvas == null)
             return false;
         var context = canvas.getContext("2d");
         context.fillStyle = "#EEEEFF";
       
         context.fillRect(0, 0, 400, 300);
         image.onload = function () {
             context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸
         }
     }
    
     draw13("myCanvas");
	
	</script>
</body>
</html>